 var xiazhai = [
{img:"http://blz.nos.netease.com/1/duizhan/guide/s1/a1.jpg",biaoTi:"01 . 开始安装",neiRong:"欢迎使用“魔兽争霸官方对战平台”，点击“下一步”继续"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s1/a2.jpg",biaoTi:"02 . 选择安装路径",neiRong:"确定安装目录后请点击“安装”"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s1/a3.jpg",biaoTi:"03 . 正在安装",neiRong:"安装中，请稍后"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s1/a4.jpg",biaoTi:"04 . 安装完成",neiRong:"点击“完成”立即运行“魔兽争霸官方对战平台”"}
]
var dengLu = [
	{img:"http://blz.nos.netease.com/1/duizhan/guide/s2/pic1.jpg", duanLu:"昵称可以使用汉字与英文，长度要求在2～8个汉字之间或4～15个英文字符"},
	{img:"http://blz.nos.netease.com/1/duizhan/guide/s2/pic2.jpg",duanLu:"登录成功"},
	{img:"http://blz.nos.netease.com/1/duizhan/guide/s2/pic3.jpg"}

]
var gaiJian = [
	{img:"http://blz.nos.netease.com/1/duizhan/guide/s3/pic1.jpg",duanLu:"改键在保存之后生效。"},
	{img:"http://blz.nos.netease.com/1/duizhan/guide/s3/pic2.jpg",duanLu:"使用平台自带小队语音功能，使队友之间的交流变得更加便捷"},
	{img:"http://blz.nos.netease.com/1/duizhan/guide/s3/pic3.jpg"}

]
var xuanZhe = [
{biaoTi:"匹配对战是一个悠闲娱乐的模式，不影响赛季等级。在匹配模式中你能收获体现某个种族熟练度的种族经验与体现DOTA模式某个英雄熟练度的英雄经验。"},
{biaoTi:"在房间列表模式中，你可以添加AI或者与好友约战。但在房间列表模式中，你无法得到任何收益。"},
{biaoTi:"赛季模式按照官方赛季机制，定期更新，赛季等级是玩家实力的体现，每个赛季的优胜者还将获得线下赛的参赛资格。在赛季模式中你还能收获WarIII的种族经验与DOTA模式的英雄经验。目前暂未开放。"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s4/pic1.jpg",duanLu:"选择WarIII模式 - 匹配对战"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s4/pic2.jpg",duanLu:"选择WarIII模式 - 房间模式", name1:"在房间列表中，既可以双击进入已有房间，也可以创建一个新房间"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s4/pic3.jpg",name2:"在准备之前点击空楼层可以完成位置交换，右键其他玩家可以申请交换位置"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s4/pic4.jpg",duanLu:"选择WarIII模式 - 天梯"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s4/pic6.jpg",duanLu:"选择WarIII模式 - 游戏内"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s4/pic5.jpg"}

]
var DOTA = [
{biaoTi:"匹配对战是一个悠闲娱乐的模式，不影响赛季等级。在匹配模式中你能收获体现某个种族熟练度的种族经验与体现DOTA模式某个英雄熟练度的英雄经验。"},
{biaoTi:"在房间列表模式中，你可以添加AI或者与好友约战。但在房间列表模式中，你无法得到任何收益。"},
{biaoTi:"赛季模式按照官方赛季机制，定期更新，赛季等级是玩家实力的体现，每个赛季的优胜者还将获得线下赛的参赛资格。在赛季模式中你还能收获WarIII的种族经验与DOTA模式的英雄经验。目前暂未开放。"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s5/pic1.jpg",duanLu:"选择DOTA模式 - 匹配对战"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s5/pic2.jpg",duanLu:"选择DOTA模式 - 房间模式",name1:"在房间列表中，既可以双击进入已有房间，也可以创建一个新房间"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s5/pic3.jpg",name:"在准备之前点击空楼层可以完成位置交换，右键其他玩家可以申请交换位置"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s5/pic4.jpg",duanLu:"选择模式-英雄选择界面"},

]
var guanZhan = [
{img:"http://blz.nos.netease.com/1/duizhan/guide/s6/pic1.jpg",duanLu:"观战 - WarIII模式"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s6/pic2.jpg",duanLu:"观战 - DOTA模式"},
{img:"http://blz.nos.netease.com/1/duizhan/guide/s6/pic3.jpg"}
]


var kdqlunboDiv = document.querySelector(".k-d-q-lun-bo");

var kdqlunbotuDiv = document.createElement("div");
	kdqlunbotuDiv.className = "k-d-q-lun-bo-tu";
	kdqlunboDiv.appendChild(kdqlunbotuDiv);





// var 
for (var i = 0; i < xiazhai.length; i++) {
	var kdqlunbotuyiDiv = document.createElement("div");
		kdqlunbotuyiDiv.className = "kdq-lun-bo-tu-yi";
		kdqlunbotuDiv.appendChild(kdqlunbotuyiDiv);

	var div = document.createElement("div");
		div.className = "kdq-lun-bo-p";
		kdqlunbotuyiDiv.appendChild(div);


	var img = document.createElement("img");
		img.src = xiazhai[i].img;
		kdqlunbotuyiDiv.appendChild(img);

	var h4 = document.createElement("h4");
		h4.innerHTML = xiazhai[i].biaoTi;
		div.appendChild(h4);

	var p = document.createElement("p");
		p.innerHTML = xiazhai[i].neiRong;
		div.appendChild(p);

}


// two
var kdqlunbouDiv = document.querySelector(".kdqlun");

var kdqlunbotupuDiv = document.createElement("div");
	kdqlunbotupuDiv.className = "k-d-q-lun-bo-tu-two";
	kdqlunbouDiv.appendChild(kdqlunbotupuDiv);

for (var i = 0; i < dengLu.length; i++) {
	var kdqtwoDiv = document.createElement("div");
		kdqtwoDiv.className = "kdq-two";
		kdqlunbotupuDiv.appendChild(kdqtwoDiv);

	var img = document.createElement("img");
		img.src = dengLu[i].img;
		kdqtwoDiv.appendChild(img);

	var p = document.createElement("p");
		p.innerHTML = dengLu[i].duanLu;
		kdqtwoDiv.appendChild(p);
}

// three
var kdqlunbouthreeDiv = document.querySelector(".kdq-three");

var kdqthreeDiv = document.createElement("div");
	kdqthreeDiv.className = "k-d-q-three";
	kdqlunbouthreeDiv.appendChild(kdqthreeDiv);

	for (var i = 0; i < gaiJian.length; i++) {
		var kdqthree1Div = document.createElement("div");
			kdqthree1Div.className = "k-d-q-three-gaijian"
			kdqthreeDiv.appendChild(kdqthree1Div);

		var img = document.createElement("img");
			img.src = gaiJian[i].img;
			kdqthree1Div.appendChild(img);

		var p = document.createElement("p");
			p.innerHTML = DOTA[i].duanLu;
			kdqthree1Div.appendChild(p);
	}


var kdqlunboufourDiv = document.querySelector(".kdq-four");

for (var i = 0; i < 3; i++) {
	var p = document.createElement("p");
		p.innerHTML = xuanZhe[i].biaoTi;
		kdqlunboufourDiv.appendChild(p);
}
// 第一张图片
var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s4/pic1.jpg";
	kdqlunboufourDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "选择WarIII模式 - 匹配对战";
	kdqlunboufourDiv.appendChild(h3);
// 第二张
var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s4/pic2.jpg";
	kdqlunboufourDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "选择WarIII模式 - 房间模式";
	kdqlunboufourDiv.appendChild(h3);

var p = document.createElement("p");
	p.innerHTML = "在房间列表中，既可以双击进入已有房间，也可以创建一个新房间";
	kdqlunboufourDiv.appendChild(p);

// 第三张
var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s4/pic3.jpg";
	kdqlunboufourDiv.appendChild(img);

var p = document.createElement("p");
	p.innerHTML = "在准备之前点击空楼层可以完成位置交换，右键其他玩家可以申请交换位置";
	kdqlunboufourDiv.appendChild(p);

// 第四张
var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s4/pic4.jpg";
	kdqlunboufourDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "选择WarIII模式 - 天梯";
	kdqlunboufourDiv.appendChild(h3);

// 第五张

var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s4/pic6.jpg";
	kdqlunboufourDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "选择WarIII模式 - 游戏内";
	kdqlunboufourDiv.appendChild(h3);

// 第六张

var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s4/pic5.jpg";
	kdqlunboufourDiv.appendChild(img);




// DOTA
var kdqlunboufiveDiv = document.querySelector(".kdq-five");

for (var i = 0; i < 3; i++) {
	var p = document.createElement("p");
		p.innerHTML = DOTA[i].biaoTi;
		kdqlunboufiveDiv.appendChild(p);
}
// 第一张
var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s5/pic1.jpg";
	kdqlunboufiveDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "选择DOTA模式 - 匹配对战";
	kdqlunboufiveDiv.appendChild(h3);
// 第二张
var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s5/pic2.jpg";
	kdqlunboufiveDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "选择DOTA模式 - 房间模式";
	kdqlunboufiveDiv.appendChild(h3);

var p = document.createElement("p");
	p.innerHTML = "在房间列表中，既可以双击进入已有房间，也可以创建一个新房间";
	kdqlunboufiveDiv.appendChild(p);

// 第三张

var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s5/pic3.jpg";
	kdqlunboufiveDiv.appendChild(img);

var p = document.createElement("p");
	p.innerHTML = "在准备之前点击空楼层可以完成位置交换，右键其他玩家可以申请交换位置";
	kdqlunboufiveDiv.appendChild(p);

// 第四张

var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s5/pic4.jpg";
	kdqlunboufiveDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "选择模式-英雄选择界面";
	kdqlunboufiveDiv.appendChild(h3);

var p = document.createElement("p");
	p.innerHTML = "DOTA模式的英雄选择在英雄选择界面完成，游戏将在60秒倒计时结束后开始。";
	kdqlunboufiveDiv.appendChild(p);

var p = document.createElement("p");
	p.innerHTML = "需要注意的是选择英雄需要双击英雄头像或者点击确认选择，最后5秒无法选择或交换英雄。";
	kdqlunboufiveDiv.appendChild(p);

// 第五张


var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s5/pic5.jpg";
	kdqlunboufiveDiv.appendChild(img);

var p = document.createElement("p");
	p.innerHTML = "选择英雄后只有一次重选的机会。";
	kdqlunboufiveDiv.appendChild(p);

var p = document.createElement("p");
	p.innerHTML = "开局金钱规则为初始875金币，选择指定英雄扣除250金币，随机选择扣除50金币，重新选择扣除100金币。";
	kdqlunboufiveDiv.appendChild(p);

// 第六张


var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s5/pic6.jpg";
	kdqlunboufiveDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "选择DOTA模式 - 游戏内";
	kdqlunboufiveDiv.appendChild(h3);

// 第七张

var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s5/pic7.jpg";
	kdqlunboufiveDiv.appendChild(img);

// 观战模式
var kdqlunbousixDiv = document.querySelector(".kdq-six");
// 第一张
var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s6/pic1.jpg";
	kdqlunbousixDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "观战 - WarIII模式";
	kdqlunbousixDiv.appendChild(h3);

// 第二张

var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s6/pic2.jpg";
	kdqlunbousixDiv.appendChild(img);

var h3 = document.createElement("h3");
	h3.innerHTML = "观战 - DOTA模式";
	kdqlunbousixDiv.appendChild(h3);

// 第三张
var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s6/pic3.jpg";
	kdqlunbousixDiv.appendChild(img);





var kdqlunbousevenDiv = document.querySelector(".kdq-seven");

var img = document.createElement("img");
	img.src = "http://blz.nos.netease.com/1/duizhan/guide/s7/pic1.jpg";
	kdqlunbousevenDiv.appendChild(img);









// 轮播图js

// 找到所有类名为k-d-q-lun-bo
var kdqlunboDivs = document.querySelectorAll(".k-d-q-lun-bo");
// 找到所有的span
var spans = document.querySelectorAll(".kdq-span span");

for (var i = 0; i < spans.length; i++) {
	spans[i].index = i;
	spans[i].onclick = function (e) {
		 for (var i = 0; i < spans.length; i++) {
		 	spans[i].className = "";
		 	kdqlunboDivs[i].className = "k-d-q-lun-bo";
		 }

		 spans[e.target.index].className = "kdq-anniu";
		 kdqlunboDivs[e.target.index].className = "k-d-q-lun-bo kdq-one";

	};
}














